import {} from 'antd-mobile'
import style from './index.module.less'
import { useMemo, useState } from 'react'
import classNames from 'classnames'
import { useAppDispatch } from '@src/redux/hook'
import { push } from '@src/redux/reducers/pages'

function Btn ({ title, onClick = () => {} }) {
  const [active, setActive] = useState(false)
  return (
    <a className={classNames(style.btn, {[style.active]: active})} onClick={() => {
      setActive(true)
      onClick()
      setTimeout(() => {
        setActive(false)
      }, 200)
    }}>
      {title}
    </a>
  )
}

function Main ({ data = { status: '已提交' } }) {
  const dispatch = useAppDispatch()
  const applicant = useMemo(() => {
    if (data && data.applicants instanceof Array) {
      return data.applicants.map(li => li.name).join('、')
    }
    return ''
  }, [data])
  const respondent = useMemo(() => {
    if (data && data.respondents instanceof Array) {
      return data.respondents.map(li => li.name).join('、')
    }
    return ''
  }, [data])
  const { status, className } = useMemo(() => {
    const className = [style.status]
    let s = data.status
    if (!data) {
      return { status: s, className }
    }

    if (s === '待审核') {
      className.push(style.pass)
    } else if (s === '已受理') {
      className.push(style.wait)
    } else if (['送达中', '审理中'].includes(s)) {
      className.push(style.wait)
    } else if (['已结案', '不予受理', '已归档'].includes(s)) {
      className.push(style.close)
    } else if (s === '审核不通过') {
      className.push(style.unpass)
    } else {
      className.push(style.unsubmit)
    }
    return {
      status: s,
      className
    }
  }, [data])
  return (
    <div className={style.container}>
      <div className={style.title}>案号：{data.caseno_desc || '无'}</div>
      <div className={style.line}>
        <div className={style.label}>申请人</div>
        <div className={style.value}>{applicant || '无'}</div>
      </div>
      <div className={style.line}>
        <div className={style.label}>被申请人</div>
        <div className={style.value}>{respondent || '无'}</div>
      </div>
      <div className={style.line}>
        <div className={style.label}>状态</div>
        <div className={style.value}>
          <span className={classNames(style.status, ...className)}>{status || '未提交'}</span>
        </div>
      </div>
      {
        data.arbitrators && (
          <div className={style.line}>
            <div className={style.label}>仲裁庭</div>
            <div className={style.value}>{data.arbitrators}</div>
          </div>
        )
      }
      {
        data.processers && (
          <div className={style.line}>
            <div className={style.label}>办案秘书</div>
            <div className={style.value}>{data.processers}</div>
          </div>
        )
      }
      <div className={style['operate-line']}>
        {
          (data.status === null || data.status === '审核不通过') ? (
            <Btn onClick={() => { dispatch(push({ element: 'caseEdit', meta: { id: data.id } })) }} title='编辑案件' />
          ) : (
            <>
              <Btn title='案件详情' onClick={() => { dispatch(push({ element: 'caseDetail', title: '案件详情', meta: { id: data.id, caseno: data.caseno} })) }} />
              {/* <Btn title='案件操作' /> */}
            </>
          )
        }
      </div>
    </div>
  )
}


export default Main
